<template>
  <div class="bubble-container">
    <div class="bubble-outbox" v-for="item in bubbleList"
      :style="{transform:`translate(-50%,-100%) translate(${item['position']['x']}px,${item['position']['y']-20}px)`}"
      :key="item.id">
      <div class="bubble">
        <span class="closebtn el-icon-close" @click="removeBubble(item.id)"></span>
        <p class="line" v-for="(value,bubbleitem) in item.bubble" :key="bubbleitem">
          <span>{{bubbleitem}}</span>
          <span>{{item['bubble'][bubbleitem]}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Bubble, TopBubble, NormalBubble } from './bubble/bubble.js'
export default {
  data () {
    return {
      bubbleList: []
    }
  },
  methods: {
    getBubbleList () {
      return this.bubbleList
    },
    /* 方法说明
      @method createSingleBubble
      @param  {obj}  bubbleInfo  新增气泡对象
        ----@param  {string} id     信息点ID
        ----@param  {string} dType  信息点类型
        ----@param  {string} bubble 信息点气泡内容
    */
    createSingleBubble (bubbleInfo, style = 'normal') {
      const overlay = document.getElementById('pop-container') // 获取气泡容器
      // 外侧容器
      const bubbInfo = Object.assign({ id: bubbleInfo.id }, bubbleInfo.bubble)
      if (style === 'normal') {
        const bubbleItem = new NormalBubble(overlay, bubbInfo, this)
        const bubbleDom = bubbleItem.buildBubbleDom()
      } else if (style === 'simple') {
        const simpleBubble = new TopBubble(overlay, bubbInfo, this)
        const bubbleDom = simpleBubble.buildBubbleDom()
      }
    },

    // 移除气泡
    removeBubble (bubbleID) {
      this.$parent.closeBubbleById(bubbleID)
    }
  }
}
</script>

<style lang="scss" scoped>
.bubble-container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	.bubble-outbox {
		width: 300px;
		height: 200px;
		border: 2px solid #09f;
		position: absolute;
		background-color: #fff;
		&::after {
			bottom: -33px;
			border-color: #fff transparent transparent;
		}
	}
	.bubble {
		padding: 10px;
		color: #000;
		pointer-events: auto;
	}
	.closebtn {
		cursor: pointer;
		position: absolute;
		right: 4px;
		top: 4px;
	}
}
.bubble-container .bubble-outbox::before,
.bubble-container .bubble-outbox::after {
	content: '';
	display: block;
	border-width: 20px;
	position: absolute;
	bottom: -40px;
	left: 130px;
	border-style: solid dashed dashed;
	border-color: #09f transparent transparent;
	font-size: 0;
	line-height: 0;
}

</style>

<style lang="scss">
.ol-popup-simple {
	position: absolute;
	width: 260px;
	height: 40px;
	bottom: 10px;
	padding: 6px;
	left: -50px;
	overflow: hidden;
	z-index: 4;
	font-size: 12px;
	cursor: pointer;
	border: 5px solid;
	border-left-width: 1px;
	border-right-width: 1px;
	border-image-slice: 5 100;
	border-image-width: 5px 100px;
	background: rgba(0,0,0,0.9);
	color: #fff;
	transition: 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ol-popup {
	position: absolute;
	width: 260px;
	height: 240px;
	bottom: 10px;
	padding: 6px;
	left: -50px;
	overflow: hidden;
	z-index: 4;
	cursor: pointer;
	border: 10px solid;
	border-left-width: 1px;
	border-right-width: 1px;
	border-image-slice: 10 100;
	border-image-width: 10px 100px;
	background: rgba(0,0,0,0.9);
	color: #fff;
	transition: 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
	&:after {
		border-top-color: #000;
		border-width: 10px;
		left: 48px;
		margin-left: -10px;
	}
	&:before {
		border-top-color: #ccc;
		border-width: 11px;
		left: 48px;
		margin-left: -11px;
	}
}
.ol-popup:after,
.ol-popup:before {
	top: calc(100% + 10px);
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 2px;
	right: 8px;
	&:after {
		content: '✖';
		color: #999;
	}
}
.ol-bubble-content {
	height: calc(100% - 10px);
	width: 246px;
	border: 1px solid #2f2f2f;
}
.bubble-title {
	height: 28px;
	line-height: 28px;
	font-size: 12px;
	padding-left: 10px;
	background: #2f2f2f;
}
.bubble-content {
	height: 158px;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 16px;
	box-sizing: border-box;
	overflow: hidden;
}
.bubble-btn-box {
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	.bubble-btn {
		height: 24px;
		line-height: 24px;
		font-size: 12px;
		color: #fff;
		padding: 0px 9px;
		margin: 4px;
		background: #3e3e3e;
		&:active {
			background: #1a1a1a;
		}
	}
}

</style>
